<template>
  <div>
    <Form :validOnChange="true" :model="sqlModel" mode="twocolumn">
      <FormItem label="数据源" prop="nodeType" single>
        <Select v-model="sqlModel.dataSourceId" :datas="data"></Select>
      </FormItem>
      <Row :space-y="10">
        <Cell>
          <textarea rows="10" placeholder="执行语句" v-model="sqlModel.sql" style="width:100%;"></textarea>
        </Cell>
        <Cell>
          <textarea rows="5" placeholder="条件换行分隔" v-model="sqlModel.dyWhere" style="width:100%;"></textarea>
        </Cell>
      </Row>

      <FormItem label="成功标志">
        <input v-model="sqlModel.success" type="text" />
      </FormItem>
      <FormItem label="数据格式">
        <Select :datas="dataType" v-model="sqlModel.dataType"></Select>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button :block="true" text-color="primary" @click="save">确认</Button>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.loadData();
  },
  data() {
    return {
      data: [],
      sqlModel: {
        dataSourceId: "",
        sql: "",
        dyWhere: "",
        success: "$size == 1",
        dataType: "list",
      },
      dataType: [
        { keyId: "list", title: "集合" },
        { keyId: "object", title: "对象" },
      ],
      param: {
        keyName: "keyId",
        titleName: "title",
      },
    };
  },
  methods: {
    sqlInit(data) {
      if (!!data) {
        this.sqlModel = data;
      }
    },
    loadData() {
      this.$axios.post("/cfdatasources/all").then((res) => {
        this.data = res.data.data;
      });
    },
    save() {
      this.$emit("setContent", this.sqlModel);
    },
  },
  deactivated() {
    this.$destroy(true);
  },
};
</script>
